(function($){
    $.fn.ajaxUpLoad = function(options){
        var imgSrc = []; // 图片路径
        var imgName = []; // 图片的名字
        var imgBox = '#' + options.imgBox; // 显示图片的名字
        var uploadData = '#' + options.uploadForm; // form 表单ID
        var thisObj = $(this); // 当前对象
        // 确定提交按钮
        thisObj.change(function(){
            imgSrc = [];
            imgName = [];
            var fileImg = $(thisObj)[0].files;
            var formObj = new FormData($(uploadData)[0]);
            for(var a = 0 ; a < fileImg.length ; a ++){
                var imgType = /\.(png|jpg|jpeg|gif)$/
                if(fileImg[a].name.match(imgType)){ // 检查文件类型
                    // 获得图片路径
                    imgSrc.push(getImgUrl(fileImg[a]));
                    // 文件名字
                    imgName.push(fileImg[a].name);
                }else {
                    alert('类型不支持！');
                    return false;
                }
            }
            for(var b = 0 ; b < fileImg.length ; b ++) {
                formObj.append(options.data, fileImg[0]);
            }
            console.log(fileImg)
            // 显示图片
            showImgBox(imgBox);
            submitPicture(options.url, formObj);
        })

        // 显示图片盒子
        var liStr = '<li class="show-img">\n' +
            '                            <i class=" iconfont iconfujian fl"></i>\n' +
            '                            <p class="file-name">imgName</p>\n' +
            '                            <p class="progress-bar"></p>\n' +
            '<em class="percentage-bar"></em>'+
            '<em class="percentage-number">0%</em>'+
            '<a class="delete-img default-hide" title="删除" href="javascript:;">删除</a>'+
            '                            <i class="iconfont iconclose  fr" title="取消上传"></i>\n' +
            '                            <i class="iconfont iconreload default-hide" title="重新上传"></i>\n' +
            '                        </li>'
        var showImgBox = function(imgBox){
            for(var a = 0 ; a < imgSrc.length ; a ++){
                $(imgBox).append(
                    liStr.replace('imgName' ,imgName[a])
                );
            }
        }

        // 获得图片路径
        var getImgUrl = function(file){
            var url = null ;
            if(window.createObjectURL != undefined) { // basic
                url = window.createObjectURL(file);
            } else if(window.URL != undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file);
            } else if(window.webkitURL != undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file);
            }
            return url;
        }

        // 上传图片
        var submitPicture = function(url , data){
            if(url && data){
                $.ajax({
                    type: "post",
                    url: url,
                    async: true,
                    data: data,
                    //下面这两个要写成false，要不然上传不了。
                    processData: false,
                    contentType: false,
                    xhr:function(){
                        var myXhr = $.ajaxSettings.xhr();
                        if(myXhr.upload){ // check if upload property exists
                            myXhr.upload.addEventListener('progress',function(e){
                                var loaded = e.loaded;//已经上传大小情况
                                var tot = e.total;//附件总大小
                                var per = Math.floor(100*loaded/tot)
                                $(".percentage-bar").css("width" , per +"%"); //设置完成的进度条宽度
                                $(".percentage-number").html(per+'%').css('left',per+'%');
                                /*
                                *
                                * */


                            }, false); // for handling the progress of the upload
                        }
                        return myXhr;
                    },
                    success:function(data){
                        $('.progress-bar').addClass('upload-success-hide');
                        $(".percentage-bar").addClass('upload-success-hide');
                        $(".percentage-number").addClass('upload-success-hide');
                        $('.iconclose').addClass('upload-success-hide');
                        $('.delete-img').removeClass('default-hide');
                        layer.msg(data.message , { icon:1 , time:2000 })
                    },
                    error:function(err){
                        $(".percentage-bar").addClass('upload-error') // 上传失败
                        $(".percentage-number").addClass('upload-error-num') // 上传失败
                        $('.iconreload').show();
                        console.log("上传失败！" , err);
                    }
                })
            }else{
                alert('参数有误');
            }
        }
    }
})(jQuery)